<template>
  <div>
    <div v-bind="{'active': isActive}">abcd</div>
    <div v-bind:class="classObject"></div>
    <div v-bind:style="{color: activeColor, fontSize: fontSize+'px'}">ffffff</div>
  </div>
</template>

<script>
export default {
  name: 'bindClass',
  data () {
    return {
      isActive: true,
      error: {
        value: true,
        type: 'fatal'
      },
      fontSize: 20,
      activeColor: 'red'
    }
  },
  computed: {
    classObject: function () {
      return {
        base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal'
      }
    }
  }
}
</script>

<style scoped>
.base {
  width: 200px;
  height: 100px;
}
.active {
  background: green;
}
.text-danger {
  background: red;
}
</style>
